<template>
    <div class="model-list-body">
        <div class="header">
            <div class="left-title">
                <img class="left-img" src="https://img.js.design/assets/img/62732d175330b31038157f2c.png">
                <span class="title2" :class="activeName == '新闻中心' ?'activeName':''"
                      @click="getBasicInformation">新闻中心</span>
<!--                <span class="title2" :class="activeName == '课程公告' ?'activeName':''" style="margin-left: 10px"-->
<!--                      @click="getBasicBulletin">课程公告</span>-->
            </div>
            <div class="right-more">
                <span @click="allState">全部</span>
                <el-icon>
                    <ArrowRightBold/>
                </el-icon>
            </div>
        </div>
        <div class="body">
<!--            {{infoMations.rows.slice(0,3)}}-->
            <div v-if="activeName == '新闻中心'">
                <div v-if="infoMations.rows && infoMations.rows.length">
                    <el-row :gutter="20" v-for="item in infoMations.rows.slice(0,3)" :key="item"
                            style="margin-bottom: 36px;cursor: pointer" @click="lookNews(item)">
                        <el-col :span="6">
                          <el-image style="width: 200px; height: 100px" :src="item.bannerPic ? item.bannerPic:'https://os-c1.ccwtech.net/ck1/uploads/ZyCKS7/ABUIABAEGAAg-5qZjwYo.png'" :fit="cover" />
                        </el-col>
                        <el-col :span="18"
                                style="display: flex;flex-direction: column;justify-content: space-between;padding: 5px 0px">
                            <p style="color: rgba(51, 51, 51, 1);font-size: 16px;font-weight: 700;">{{item.title}}</p>
                            <p>{{item.content}}</p>
                            <div style="display: flex;color: rgba(128, 128, 128, 1);font-size: 14px;font-weight: 400;border-bottom: 1px solid #e7e5e4">
                                <p style="margin-right: 20px;">发布时间：{{proxy.$filters.dateTimeFormat(item.releaseTime).substr(0,10)}}</p>
                                <p>阅读量：{{item.basisNum + (item.readNum || 0)}}</p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <el-empty v-else description="暂无数据" style="margin-bottom:50px"  />
            </div>
<!--                        {{basicBulletinList.slice(0,3)}}-->
            <div v-if="activeName == '课程公告'">
                <div v-if="basicBulletinList.length">
                    <el-row :gutter="20" v-for="item in basicBulletinList.slice(0,3)" :key="item"
                            style="margin-bottom: 36px;cursor: pointer" @click="lookCourse(item)">
                        <el-col :span="6">
                            <img width="200"
                                 :src="item.bannerPic ? item.bannerPic:'https://os-c1.ccwtech.net/ck1/uploads/ZyCKS7/ABUIABAEGAAg-5qZjwYo.png'"
                                 alt="">
                        </el-col>
                        <el-col :span="18"
                                style="display: flex;flex-direction: column;justify-content: space-between;padding: 5px 0px">
                            <p style="color: rgba(51, 51, 51, 1);font-size: 20px;font-weight: 700;">{{item.title}}</p>
                            <p>{{item.content}}</p>
                        </el-col>
                    </el-row>
                </div>
                <el-empty v-else description="暂无公告" style="margin-bottom:50px" />
            </div>
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs, watchEffect,getCurrentInstance} from 'vue';
    import {basicInformation, basicBulletin,types} from "@/api/api";
    import {useRouter} from "vue-router";

    export default {
        name: "infoMation",
        props: {
            activeCourse: {
                type: String
            }
        },
        setup(props) {

            let router = useRouter();
            const { proxy } = getCurrentInstance()

            // let getTypes = () =>{
            //     types().then(res =>{
            //         console.log('公共类型',res)
            //     })
            // }
            // getTypes();

            let data = reactive({
                infoMations: [],
                basicBulletinList: [],
                activeName: '新闻中心'
            })

            let getBasicInformation = () => {
                data.activeName = '新闻中心'
                basicInformation({type: '新闻中心', courseID: localStorage.getItem('activeCourse')}).then(res => {
                    console.log('资讯', res)
                    data.infoMations = res.data
                })
            }

            let getBasicBulletin = () => {
                data.activeName = '课程公告'
                basicBulletin({courseID: localStorage.getItem('activeCourse')}).then(res => {
                    console.log('课程公告', res)
                    data.basicBulletinList = res.data
                })
            }

            let active_map = {'新闻中心': 'pressCenter', '课程公告': 'courseNotice'};

            let lookNews = (item) => {
                console.log(item);
                router.push({
                    name: 'InfoMationMessage',
                    params: {n_id: item.id, activeName: active_map[data.activeName]}
                })
            }

            let lookCourse = (item) => {
                router.push({name: 'LookCourse', params: {c_id: item.id, activeName: active_map[data.activeName]}})
            }
            getBasicInformation();

            watchEffect(() => {
                let activeCourse = props.activeCourse;
                console.log('咨讯activeName', activeCourse)
                getBasicBulletin();
                getBasicInformation();
            })

            let allState = () => {
                router.push({name: 'MoreInfoMation', params: {activeName: data.activeName}})
            }
            return {
                proxy,
                lookCourse,
                allState,
                ...toRefs(data),
                lookNews,
                getBasicInformation,
                getBasicBulletin
            }
        }
    }
</script>

<style scoped>
    .body .item {
        height: 181px;
        margin-bottom: 39px;
        justify-content: space-between;
    }

    .item-contnet {
        margin-left: 41px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 13px 0px;
    }

    .item-content-title {
        color: rgba(51, 51, 51, 1);
        font-size: 20px;
        font-weight: 700;
    }

    .item-content-content {
        display: flex;
        flex-direction: column;
        color: rgba(128, 128, 128, 1);
        font-size: 16px;
        font-weight: 400;
    }
    .item-content-time{
        display: flex;
    }
    .item-content-time p{
        margin-right: 10px;
        color: rgba(128, 128, 128, 1);
        font-size: 16px;
        font-weight: 400;
    }
    .activeName {
        color: rgba(51, 51, 51, 1) !important;
        font-size: 20px;
        font-weight: 400;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0px;
    }

    .model-list-body {
        width: 100%;
        height: 50%;
    }

    .left-title {
        display: flex;
        align-items: center;
    }

    .left-title .left-img {
        width: 1.8125rem;
        margin-right: 1rem;
    }

    .header .left-title .title {
        font-size: 1.25rem;
        color: rgba(51, 51, 51, 1);
        margin-right: 0.6875rem;
    }

    .header .left-title .title2 {
        font-size: 16px;
        color: rgba(128, 128, 128, 1);
        cursor: pointer;
    }

    .right-more {
        display: flex;
        align-items: center;
        color: rgba(153, 153, 153, 1);
        cursor: pointer;
    }
    .model-list-body .body .el-col-6{
        flex:0
    }
</style>
